<template>
  <div class="detailNavBar">

    <div class="navBar">
      <div class="navBarLogo" @click="jumpToIndex">LOGO</div>

      <div class="navBarSearch">

        <el-input type="text"
                      size="mini"
                      v-model="text"
                      placeholder="中文文献、外文文献"
                      maxlength="50"
                      show-word-limit
                      clearable
                      @keydown.enter="jumpToSearch(text)">
            </el-input>
        <el-button class="navBarSearchBtn" icon="el-icon-search" circle size="mini" @click="jumpToSearch(text)"></el-button>

      </div>

      <div v-show=!isLogin class="navBarLogninBtn">
        <el-button size="small" @click="jumpToLogin">登录</el-button>
      </div>
      <div v-show=isLogin class="navBarLogninBtn">

        <el-dropdown>
          <el-button size="small" type="primary" @click="jumpToSelfCenter">
            个人中心
            <el-icon class="el-icon--right"><arrow-down /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="logOut">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>

    </div>
  </div>

</template>

<script>
import {ArrowDown} from "@element-plus/icons";

const {ElMessage} = require("element-plus");
export default {
  name: "DetailNavBar",
  data() {
    return {
      isLogin: true,
      user: {},
      text: '',
    }
  },
  components: {
    ArrowDown
  },
  mounted() {
    this.checkIsLogin()
  },
  methods: {

    checkIsLogin() {
      this.user = JSON.parse(localStorage.getItem('user'))
      console.log('user'+ this.user)
      this.user == null ? this.isLogin=false : this.isLogin=true
    },

    jumpToLogin() {
      const {href} = this.$router.resolve({
        path: '/user/sign/login',
      });
      window.open(href, '_self')
    },

    jumpToIndex() {
      const {href} = this.$router.resolve({
        path: '/index',
      });
      window.open(href, '_self')
    },

    jumpToSelfCenter() {
      const {href} = this.$router.resolve({
        path: '/user',
      });
      window.open(href, '_self')
    },

    jumpToSearch(text) {
      console.log(text);

      if (text === '') {
        ElMessage({
          message: '搜索不能为空',
          type: 'warning',
        })
        return
      }

      const { href } = this.$router.resolve({
        path: '/paperSearch',
        query: {
          key: text
        }
      });
      window.open(href, '_self')

    },

    logOut() {
      localStorage.removeItem('user')
      const {href} = this.$router.resolve({
        path: '/',
      });
      window.open(href, '_self')
    },
  }
}
</script>

<style scoped>


.detailNavBar {
  background-color: #1D76D9FF;
  color: white;
}

.navBarLogo {
  margin-left: 2%;
  margin-top: 20px;
  margin-bottom: 20px;
}

.navBarSearch {
  display: flex;
  align-items: center;
  margin-left: 50%;
  width: 30%;
}

.navBarSearchBtn {
  margin-left: 10px;
}

.navBarLogninBtn {
  display: flex;
  align-items: center;
  margin-left: 2%;
}

.navBar {
  display: flex;
}

</style>